<template>
  <div>

    <el-row type="flex" justify="center" :gutter="20" style="margin-top: 60px">

      <el-col :span="6">

        <!-- 捷運站列表下拉選單 -->
        <el-select v-model="selectedStation" filterable clearable multiple placeholder="請選擇捷運站(可搜尋)" style="width:100%"
                   @visible-change="onStationSelectChange" @remove-tag="refreshPersonTimeChart">
          <el-option
            v-for="item in stationOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

      </el-col>

      <el-col :span="4">

        <!-- 時間段選擇器 -->
        <div class="block">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="dateRange"
            type="monthrange"
            align="right"
            range-separator="至"
            unlink-panels
            start-placeholder="開始時間"
            end-placeholder="結束時間"
            :picker-options="pickerOptions"
            @change="onDatePickerChange">
          </el-date-picker>
        </div>

      </el-col>
    </el-row>

    <el-row type="flex" justify="center" style="margin-top: 30px">
      <el-col :span="18">
        <!--捷運人次圖表-->
        <ve-line :data="metroPersonChart"></ve-line>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center" style=" margin-bottom: 100px;">

      <el-col :span="4">
        <h2 style="font-family:Microsoft YaHei; margin-left: 40px; color: #0707aa">捷運路線人次排名</h2>
        <!-- 路線人次排名環狀圖-->
        <ve-ring :data="routePersonRankRingData"></ve-ring>
      </el-col>

      <el-col :span="4" :offset="1">
        <h2 style="font-family:Microsoft YaHei; margin-left: 48px; color: #0707aa">捷運站人次排名</h2>
        <!-- 捷運站人次排名環狀圖-->
        <ve-ring :data="stationPersonRankRingData" :settings="{limitShowNum: 5}"></ve-ring>
      </el-col>

      <el-col :span="8" :offset="1">
        <!-- 捷運站人次排名表格 -->
        <el-table
          @filter-change="onFilterChange"
          show-summary
          sum-text="總計"
          height="340"
          :data="stationPersonRankTableData"
          style="width: 100%">

          <!-- 序號欄位 -->
          <el-table-column
            type="index"
            label="排名"
            width="70"
            align="center">
          </el-table-column>

          <!-- 站名欄位 -->
          <el-table-column
            prop="name"
            width="110"
            label="捷運站名">
          </el-table-column>

          <!-- 平均人次欄位 -->
          <el-table-column
            prop="avgPersonTimes"
            width="130"
            label="月平均人次"
            sortable
            :formatter="numFormatter">
          </el-table-column>

          <!-- 總人次欄位-->
          <el-table-column
            prop="sumPersonTimes"
            width="130"
            label="總人次"
            sortable
            :formatter="numFormatter">
          </el-table-column>

          <!-- 路線欄位 -->
          <el-table-column
            prop="tag"
            label="路線 (可選擇)"
            :filters="[{ text: '文湖', value: '文湖' }, { text: '淡水信義', value: '淡水信義' },
             { text: '松山新店', value: '松山新店' }, { text: '中和新蘆', value: '中和新蘆' }
             , { text: '板南', value: '板南' }, { text: '環狀', value: '環狀' }]"
            :filter-method="filterRouteTag"
            :filter-multiple="false"
            column-key="routeTag"
            filter-placement="bottom-end">

            <!-- 設置 路線標籤 內容與顏色 -->
            <template slot-scope="scope">
              <el-tag style="border-color: #FFFFFF"
                      effect="dark"
                      :color="scope.row.routeColor[0]"
              >{{scope.row.routeName[0]}}
              </el-tag>
              <el-tag
                style="border-color: #FFFFFF"
                v-if="scope.row.routes[1] != undefined"
                effect="dark"
                :color="scope.row.routeColor[1]"
                disable-transitions>{{scope.row.routeName[1]}}
              </el-tag>
            </template>

          </el-table-column>

        </el-table>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: "Home",

    data() {
      return {

        // 捷運人次圖表資料
        metroPersonChart: {
          columns: [],
          rows: []
        },

        // 捷運站下拉選單 選項、被選中的捷運站
        stationOpts: [],
        selectedStation: '',

        // 日期選擇器 默認選項、被選中時間段
        pickerOptions: {
          shortcuts: [{
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
              start.setMonth(start.getMonth() - 12);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近兩年',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
              start.setMonth(start.getMonth() - 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '全部',
            onClick(picker) {
              const end = new Date();
              const start = new Date(2015, 0);
              picker.$emit('pick', [start, end]);
            }
          }],
          // 限制時間選擇
          disabledDate(time) {
            // 時間不可 小於2015年 或 大於現在
            return time.getFullYear() < 2015 || time.getTime() > Date.now();
          }
        },
        dateRange: '',

        // 捷運站人次排名表格資料
        stationPersonRankTableData: [],

        // 路線人次環形圖資料
        routePersonRankRingData: {
          columns: ['路線', '人次'],
          rows: []
        },

        // 捷運站人次環形圖資料
        stationPersonRankRingData: {
          columns: ['站名', '人次'],
          rows: []
        },

        // 表格路線過濾標籤，用於時間段變更時，過濾捷運站人次環形圖資料
        routeFilterTag: undefined,

      }
    },
    methods: {

      // 刷新捷運人次圖表
      refreshPersonTimeChart() {
        this.$http.get("/metro/station/personTime/", {
          params: {
            ids: this.selectedStation + '',
            startDate: this.dateRange[0],
            endDate: this.dateRange[1]
          }
        }).then((response) => {
          let result = response.data.data
          this.metroPersonChart.columns = result.columns;
          this.metroPersonChart.rows = result.rows;
        });
      },


      // 取得捷運站列表
      getStations() {

        this.$http.get("/metro/station/list").then((res) => {

          // 捷運站列表
          let stations = res.data.rows;

          // 設置下拉選單選項
          for (let station of stations) {
            var opt = {};
            opt.label = station.name;
            opt.value = station.stationId;

            // 將選項加入下拉選單
            this.stationOpts.push(opt);
          }

          // 設置默認選中選項
          this.selectedStation = [1, 2, 3, 4];

          // 刷新捷運人次圖表
          this.refreshPersonTimeChart();

        })
      },

      // 取得捷運站人次排名
      getStationPersonTimesRank() {

        this.$http.get("/metro/station/personTime/rank", {
          params: {
            startDate: this.dateRange[0],
            endDate: this.dateRange[1]
          }
        }).then((res) => {

          /* 處理捷運站人次排名表格 開始 */
          let stations = res.data.data;
          for (let station of stations) {

            // 捷運站路線名
            station.routeName = [];
            // 捷運站路線對應顏色
            station.routeColor = [];

            // 對路線類型用逗號切割
            let routes = station.routes;

            // 將路線代號轉為中文名，並設置顏色
            for (let i = 0; i < routes.length; i++) {
              if (routes[i].routeId == 1) {
                station.routeName.push("文湖");
                station.routeColor.push("rgba(196,132,28,0.86)");
              } else if (routes[i].routeId == 2) {
                station.routeName.push("淡水信義");
                station.routeColor.push("rgb(245, 108, 108)");
              } else if (routes[i].routeId == 3) {
                station.routeName.push("松山新店");
                station.routeColor.push("rgb(87,182,40)");
              } else if (routes[i].routeId == 4) {
                station.routeName.push("中和新蘆");
                station.routeColor.push("rgb(241,175,76)");
              } else if (routes[i].routeId == 5) {
                station.routeName.push("板南");
                station.routeColor.push("rgb(54,149,246)");
              } else if (routes[i].routeId == 6) {
                station.routeName.push("環狀");
                station.routeColor.push("rgb(250,218,28)");
              }
            }
          }
          // 將資料賦值給表格
          this.stationPersonRankTableData = stations;
          /* 處理捷運站人次排名表格 結束 */

          /* 處理捷運人次排名環狀圖 開始 */
          // 環形圖資料清空
          this.stationPersonRankRingData.rows = [];
          for (let station of stations) {

            // 根據路線過濾標籤進行站點過濾，如果標籤符合或未進行過濾，則將資料加入環形圖
            for (let routeName of station.routeName) {
              if (routeName == this.routeFilterTag || this.routeFilterTag == undefined) {

                // 環形圖資料
                let obj = {};
                obj['站名'] = station.name;
                obj['人次'] = station.sumPersonTimes;

                // 資料加入環形圖
                this.stationPersonRankRingData.rows.push(obj);
                break;
              }
            }
          }
          /* 處理捷運人次排名環狀圖 結束 */

        })
      },

      // 取得路線人次排名
      getRoutePersonTimesRank() {

        this.$http.get("/metro/route/personTime/rank", {
          params: {
            startDate: this.dateRange[0],
            endDate: this.dateRange[1]
          }
        }).then((response) => {

          // 清空環狀圖記錄
          this.routePersonRankRingData.rows = [];

          // 路線列表
          let routes = response.data.data

          // 將資料存入環形圖
          for (let route of routes) {
            let obj = {};
            obj['路線'] = route.name;
            obj['人次'] = route.sumPersonTimes;
            this.routePersonRankRingData.rows.push(obj);
          }
        });
      },


      // 捷運站下拉選單狀態變更
      onStationSelectChange(flag) {
        // 下拉選單關閉 (已選好)
        if (flag == false) {
          // 刷新捷運人次圖表
          this.refreshPersonTimeChart();
        }
      },

      // 時間段選擇器變更
      onDatePickerChange() {

        // 刷新捷運人次圖表
        this.refreshPersonTimeChart();

        // 刷新捷運站人次排名表格
        this.getStationPersonTimesRank();

        // 刷新路線人次排名環狀圖
        this.getRoutePersonTimesRank();

      },

      // 表格資料過濾器異動時，更新捷運站人次環形圖資料
      onFilterChange(filters) {

        // 清空捷運站人次排名環狀圖資料
        this.stationPersonRankRingData.rows = [];

        // 要被過濾的標籤
        let routeTag = filters.routeTag[0];

        // 將過濾標籤存成全域變數，用於時間段變更時，保留已過濾的路線
        this.routeFilterTag = routeTag;

        // 捷運站人次表格資料
        let stations = this.stationPersonRankTableData;

        // 循環捷運站
        for (let station of stations) {

          // 循環捷運站的路線
          for (let routeName of station.routeName) {

            // 如果 路線名與過濾標籤值相同 or 過濾標籤值為全部 則將該捷運站資料加入到 捷運站人次環形圖資料 中
            if (routeName == routeTag || routeTag == undefined) {
              let obj = {};
              obj['站名'] = station.name;
              obj['人次'] = station.sumPersonTimes;
              this.stationPersonRankRingData.rows.push(obj);
              break;
            }
          }
        }
      },


      // 設置時間選擇器默認時間段
      defaultDateRange() {
        let beg = new Date();
        beg.setMonth(beg.getMonth() - 13);
        beg.setDate(1);
        let end = new Date();
        this.dateRange = [beg.toISOString().substring(0, 10), end.toISOString().substring(0, 10)]
      },

      // 格式化數字，加上逗號，供表格使用
      numFormatter(row, column, value) {

        let num = value.toString();
        let pattern = /(-?\d+)(\d{3})/;
        while (pattern.test(num)) {
          num = num.replace(pattern, "$1,$2");
        }
        return num;
      },

      // 表格的路線標籤過濾
      filterRouteTag(value, row) {
        // 如果標籤的值與要過濾的值相同，則保留
        for (let name of row.routeName) {
          if (name == value) {
            return true;
          }
        }
        return false;
      },


    },
    created() {

      // 設置時間選擇器默認時間段
      this.defaultDateRange();

      // 取得捷運站列表、並刷新人次圖表
      this.getStations();

      // 取得捷運站人次排名
      this.getStationPersonTimesRank();

      // 取得路線人次排名
      this.getRoutePersonTimesRank();

    }
  }
</script>

<style scoped>
  /* 處理 排名總計不顯示問題 */
  .el-table {
    overflow: visible !important;
  }
</style>
